<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Mapa do futebol</title>
    <script src="https://maps.google.com/maps/api/js?sensor=false"
      type="text/javascript"></script>
	<script type="text/javascript" src="timemap/lib/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="timemap/lib/mxn/mxn.js?(googlev3)"></script>
    <script type="text/javascript" src="timemap/lib/timeline-2.3.0.js"></script>
    <script type="text/javascript" src="timemap/src/timemap.js"></script>
	<script type="text/javascript" src="timemap/src/param.js"></script>
    <script type="text/javascript" src="timemap/src/loaders/json.js"></script>
    <script type="text/javascript" src="timemap/src/loaders/google_spreadsheet.js"></script>
	
	<script type="text/javascript">

var tm;
bandas = [Timeline.DateTime.YEAR,Timeline.DateTime.DECADE];

colunas = {
	'title':'title',
	'description':'description',
	'start':'date',
	'end':'end',
	'lat':'lat',
	'lon':'lon',
	'icon':'icon'
};
function onLoad() {
    
    // modify this variable to map your spreadsheet column names to expected ids
    //colunas['start'] = 'date';
    
    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required) 
        options: {
            eventIconPath: "http://www.edmarmoretti/mapadofutebol/images",
			mapZoom: 5
        },
        datasets: [
            {
                title: "Events",
                id: "events",
                theme: "red",
                type: "gss",
                options: {
                    // note that your spreadsheet must be published for this to work
                    key: "t4TtKtPqcv2MWxgsWBp3DYA",
                    paramMap: colunas
                }
            }
        ], 
        bandIntervals: bandas
    });
	tm.timeline.getBand(0)
};
function mudaEscalaDeTempo(){
	var nova = document.getElementById("escalaDeTempo").value;
	if(nova == "seculo")
	{bandas = [Timeline.DateTime.DECADE,Timeline.DateTime.CENTURY];}
	if(nova == "decada")
	{bandas = [Timeline.DateTime.YEAR,Timeline.DateTime.DECADE];}
	if(nova == "dd")
	{bandas = [Timeline.DateTime.DECADE,Timeline.DateTime.DECADE];}
	if(nova == "ano")
	{bandas = [Timeline.DateTime.MONTH,Timeline.DateTime.YEAR];}
	onLoad();
}
function mudaTipoDeLinha(){
	var nova = document.getElementById("tipoDeLinha").value;
	colunas.start = nova;
	onLoad();
}
function irParaAno(ano){
	if(ano > 1700 && ano < 2100)
	{tm.timeline.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime(ano));}
}
    </script>
	
    <style>
    div#timelinecontainer{
    width: 100%;
    height: 40%;
    }
    
    div#timeline{
    width: 100%;
    height: 100%;
    font-size: 12px;
    background: #CCCCCC;
    }
    
    div#mapcontainer {
    width: 100%;
    height: 60%;
    }
    
    #timemap {
    height: 650px;
    }
    div#map {
    width: 100%;
    height: 100%;
    background: #EEEEEE;
    }
    
    div.infodescription {
		width: 200px;
		font-size:10px;
    }
    div.infotitle {
		width: 150px;
		font-size:13px;
    }
	
	.timeline-band-inner{
		font-family: helvetica;
	}
	.timeline-event-label{
		padding-left: 7px;
		padding-top: 7px;
	}
	.gmnoprint{
		font-family: helvetica;
		fonct-size: 10px;
	}
    </style>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32162671-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>	
	
  </head>

  <body style='font-family: helvetica;' onload="onLoad();" >
<!---
  <div id="help">
    <h1>Data from a Google Spreadsheet</h1>
    In this example, we're loading items from a Google Spreadsheet (<a href="http://spreadsheets.google.com/pub?key=pjUcDAp-oNIOjmx3LCxT4XA" target=_blank>published here</a>).
    </div>
--->
    <p style="font-size:10px;z-index:2000;">
		Escala de tempo:
		<select id="escalaDeTempo" onchange="mudaEscalaDeTempo()" style="font-size:10px;">
			<option value="seculo" >Século</option>
			<option value="decada" selected >Década</option>
			<option value="ano" >Ano</option>
			<option value="dd" >Década-década</option>
		</select>
		Ir para o ano:
		<input type=text size=4 onchange="irParaAno(this.value)" style="font-size:10px;height:10px;" />
		Tipo de linha:
		<select id="tipoDeLinha" onchange="mudaTipoDeLinha()" style="font-size:10px;">
			<option value="date" selected >História (Brasil)</option>
			<option value="estadual" >Campeão Estadual</option>
			<option value="brasileiro" >Campeão Brasileiro</option>
			<option value="brasil" >Campeão da Copa do Brasil</option>
			<option value="libertadores" >Campeão da Libertadores</option>
		</select>
		
	</p>
	<div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>

        <div id="mapcontainer">
          <div id="map"></div>
        </div>

    </div>
	<p>
	<a href="http://spreadsheets.google.com/pub?key=t4TtKtPqcv2MWxgsWBp3DYA" target=_blank>
	Edite os dados aqui
	</a>
	<p>
	<a href="http://code.google.com/p/timemap/" target=_blank >
	Elaborado com Timemap
	</a>
	
  </body>
</html>
